[HTML5] Canvas 태그에 투명도 opacity 적용하기

Last Modified : 2019-08-25 / Created : 2019-01-26

14,371
View Count

주소 복사하기

HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.

# Canvas 태그에 투명 효과(opacity) 적용하는 방법

이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha에 숫자값을 적용하면 됩니다.

context.globalAlpha = 0.5;

매우 간단합니다. 위와 같이 숫자를 적용하며 0.5는 50%의 투명도를 가지게 됩니다. 그럼 예제를 알아보겠습니다.

# Canvas opacity 투명효과 예제보기, globalAlpha

아래는 Canvas 영역에 context를 만들고 여기에 투명도 각각 1, 0.5, 0.2를 적용하는 예제입니다. 아래와 같이 코드를 작성하고 실행하면 어떻게 결과가 나타날지 확인해보세요.

var ctx = document.createElement('canvas').getContext('2d');
ctx.font = 500 '15px' serif;
ctx.fillStyle = '#fff';

// 첫 번째 1 값 적용시
ctx.globalAlpha = 1;
fillText('globalAlpha = 1', 0, 0);

// 두 번째 0.5 값 적용시
fillText('globalAlpha = 1', 0, 0);
ctx.globalAlpha = 0.5;

// 세 번째 0.2 값 적용시
fillText('globalAlpha = 1', 0, 0);
ctx.globalAlpha = 0.2;

먼저 하얀색으로 globalAlpha라는 글을 세 번 출력하였습니다. 이때 각각 1, 0.5, 0.2로 설정한 경우 각각의 투명도는 다르겠죠. 위 코드를 실행하면 아래와 같이 다르게 적용된 하얀색 텍스트를 보실 수 있습니다.